<template>
  <!-- 用户上传成绩管理 查询 -->
  <div class="allGrade">
    <el-input v-model="name" placeholder="请输入姓名/赛事名称/组别" class="ipt"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="getList(1)">搜索</el-button>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="matchName" label="赛事名称" width="220"></el-table-column>
      <el-table-column prop="groupName" label="组别"></el-table-column>
      <el-table-column prop="distance" label="距离" width="100"></el-table-column>
      <el-table-column prop="rise" label="爬升" width="100"></el-table-column>
      <el-table-column prop="descend" label="下降" width="100"></el-table-column>
      <el-table-column prop="rank" label="排名" width="100"></el-table-column>
      <el-table-column prop="grade" label="成绩"></el-table-column>
      <el-table-column label="成绩证书">
        <template slot-scope="{row}">
          <img
            v-if="row.imgUrl"
            :src="row.imgUrl"
            alt
            class="imgGrade"
            v-showImgArr="{list:[row.imgUrl],ind:0}"
          />
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column label="是否有效">
        <template slot-scope="{row}">
          <span>{{row.state=='t'?'有效':'无效'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="text" @click="openEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="cChange"
      :current-page.sync="curP"
      :hide-on-single-page="true"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="allLength"
    ></el-pagination>
    <el-dialog
      title="成绩修改"
      :visible.sync="editDialog"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="100">
        <el-form-item label="赛事名称">
          <el-select
            v-model="editCon.matchName"
            filterable
            placeholder="请选择"
            @change="mChange"
            :disabled="editCon.matchId!=0"
            class="dIpt"
          >
            <el-option v-for="item in mArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别">
          <el-select
            v-model="editCon.groupName"
            filterable
            placeholder="请选择"
            @change="gChange"
            :disabled="editCon.groupId!=0"
            class="dIpt"
          >
            <el-option v-for="item in gArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="距离">
          <el-input v-model="editCon.distance" class="dIpt"></el-input>
        </el-form-item>
        <el-form-item label="上升">
          <el-input v-model="editCon.rise" class="dIpt"></el-input>
        </el-form-item>
        <el-form-item label="下降">
          <el-input v-model="editCon.descend" class="dIpt"></el-input>
        </el-form-item>
        <el-form-item label="平均海拔">
          <el-input v-model="editCon.meanAltitude" class="dIpt"></el-input>
        </el-form-item>
        <el-form-item label="基础路线">
          <el-input v-model="editCon.technical" class="dIpt"></el-input>
        </el-form-item>
        <el-form-item label="是否有效">
          <el-select v-model="editCon.state" placeholder="请选择">
            <el-option label="有效" value="t"></el-option>
            <el-option label="无效" value="f"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curP: 1,
      name: "",
      tableData: [],
      allLength: 1,
      editCon: {
        descend: "",
        distance: "",
        groupId: 0,
        groupName: "",
        groupRank: "",
        matchId: 0,
        matchName: "",
        name: "",
        openId: "",
        rank: 0,
        rise: 0,
      },
      editDialog: false,
      mArr: [],
      gArr: [],
    };
  },
  methods: {
    cChange(val) {
      this.curP = val;
      this.getList();
    },
    getList(i) {
      let o = { name: this.name, page: this.curP };
      if (i) o.page = 1;
      this.$axios.get("/sbr/match/getGradelist", { params: o }).then((res) => {
        let rr = res.data.data;
        this.tableData = rr.list;
        this.allLength = rr.num;
      });
    },
    // 获取所有赛事
    getMarr() {
      this.$axios
        .get("/sbr/match/getMatchsApp?name=&state=1&type=&place=&date=")
        .then((res) => {
          let rr = res.data.data;
          this.mArr = rr;
        });
    },
    // 取消修改
    cancle() {
      this.editDialog = false;
      this.editCon = {};
    },
    mChange() {
      let iv = this.mArr.find((v) => {
        return v.name === this.editCon.matchName;
      });
      if (iv) {
        this.editCon.matchId = iv.id;
        this.getGarr(iv.id);
      }
    },
    // 获取赛事下的组别
    getGarr(id) {
      this.$axios.get("/sbr/match/getMatchInfos?id=" + id).then((res) => {
        let rr = res.data.data.matchInfoLists;
        this.gArr = rr;
      });
    },
    openEdit(row) {
      this.editCon = JSON.parse(JSON.stringify(row));
      this.editDialog = true;
    },
    gChange() {
      let iv = this.gArr.find((v) => {
        return v.name === this.editCon.groupName;
      });
      if (iv) {
        this.editCon.groupId = iv.id;
        this.editCon.distance = iv.wholeCourse;
        this.editCon.rise = iv.rise;
        this.editCon.descend = iv.decline;
      }
    },
    saveEdit() {
      this.$axios.post("/sbr/match/editGrade", this.editCon).then((res) => {
        this.editDialog = false;
        this.editCon = {};
        this.getList();
      });
    },
  },
  mounted() {
    this.getMarr();
    this.getList();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.allGrade {
  width: 95%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.ipt {
  width: 200px;
}
.imgGrade {
  width: 100px;
  height: 100%;
  max-height: 120px;
}
.dIpt {
  width: 300px;
}
</style>